<template>
  <div class="container">
    <div class="logos">
      <div class="logo-1"><img src="../../assets/book-bg.png"></div>
    </div>

    <div class="login-box-container">

      <div class="login-box">
        <h3 class="login-title">账号登录</h3>
        <!-- 账号登录 -->
        <div class="tab-main">
          <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
          >
            <el-form-item class="login-user" prop="username">
              <el-icon><avatar /></el-icon>
              <el-input v-model="ruleForm.username" placeholder="请输入您的用户名"/>
            </el-form-item>
            <el-form-item class="login-password" prop="password">
              <el-icon><lock /></el-icon>
              <el-input type='password' v-model="ruleForm.password" placeholder="请输入您的密码"/>
            </el-form-item>
            <el-form-item class="login-submit">
              <el-button type="primary" @click='loginBtn(ruleFormRef)'>登录</el-button>
            </el-form-item>
            <div class="login-text">
                <span>登录即同意相关服务条款和隐私政策。</span>
            </div>
            <router-link to="/register">
              <a href="javascript:void(0)" class="register">没有账号？点击去注册</a>
            </router-link>
            
          </el-form>
        </div>
      </div>

    </div>

  </div>
</template>

<script setup>
//element-plus
import { ElMessage } from 'element-plus'
import { Avatar , Lock  } from "@element-plus/icons-vue";

// api
import userModelApi from '@/request/api/user.js'
import { onBeforeMount } from 'vue';

// vuex
import { useStore } from 'vuex';
const store = useStore();

// router
const router = useRouter();

// 表单
const ruleFormRef = ref();
const ruleForm = reactive({
  username: 'admin',
  password: 'admin123',
})
// 验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '用户名长度在3-12之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在6-12之间', trigger: 'blur' },
  ]
})


// 登录
const loginBtn = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    // 验证通过
    if (valid) {
      // 请求登录接口
      userModelApi.loginApi(ruleForm).then(async (res) => {
        if(res.code != 200){
          // 登录失败 用户名或密码错误
          return ElMessage.error(res.msg);
        }
        // 存入vuex
        store.commit("setToken", res.token);
              
        // 获取用户信息
        const res1 =  await userModelApi.getUserInfoApi();
        // 存入vuex
        // store.commit("setUserInfo", JSON.stringify(res1.data));
        store.dispatch('asySetUserInfo', res1.data);

        ElMessage({
          showClose: true,
          message: '登录成功',
          type: 'success',
        })
        // 跳转首页
        router.push('/')
      })
    } else {
      ElMessage.error('校验未通过,请输入正确的格式');
    }
  })
}



</script>

<style lang='less' scoped>
.container{
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../assets/loginbg.jpeg) no-repeat center;
  display: flex;
  align-items: center;
}

.logos{
  display: flex;
  // border: 1px solid red;
  align-items: center;
  width: 60%;
  justify-content: center;
  height: 100%;
  .logo-1{
    width: 600px;
    height: 600px;
  }

  .logo-2{
    width: 300px;
    height: 200px;
  }

  img{
    width: 100%;
    height: 100%;
  }
}

.login-box-container{
  position: relative;
  width: 475px;
  height: 500px;
  background: url(../../assets/ybbg.jpeg) no-repeat center center;
  border-radius: 15px;
  .login-box{
    padding: 10px 40px;
    width: 350px;
    height: 440px;
    background: #ffffff;
    box-shadow: 0 0 8px #cccccc;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .login-title{
      text-align: center;
      margin-top: 10px;
    }
    .tab-main{
      width: 100%;
      height: 100%;
      .login-user,.login-password{
        margin: 30px 0;
        i{
          font-size: 18px;
          color: #666;
        }
        .el-input{
          width: 90%;
        }
      }
      /deep/ .el-form-item__content {
        flex-wrap: nowrap;
        justify-content: space-between;
        // border-bottom: 1px solid #666;
      }
      .login-submit {
          button{
            width: 100%;
            height: 35px;
            outline: none;
            border: none;
            letter-spacing: 5px;
            border-radius: 18px;
            font-weight: bold;
            margin-bottom: 5px;
          }
      }
      .login-text{
        width: 100%;
        margin-top: 50px;
        color: #666;
        text-align: justify;
      }
      .register{
        position: absolute;
        bottom:10px;
        left: 50%;
        transform: translate(-50%);
        font-size: 14px;
        &:hover{
          color: skyblue;
        }
      }
    }
  }
}



</style>